<!-- <title>瑞众银保“五个一”功成---营业部经理一周一微沙<title> -->

<style lang="less" scoped>
@import '@css/list.less';
</style>

<template>
  <div id="app">
    <van-sticky>
      <div class="title">一周一微沙</div>
    </van-sticky>
    <van-form @submit="onsaveYb51SalesManagerWeekSalonRecord" @failed="onFailed">
      <van-cell-group
        inset
        :title="`一周一微沙${index + 1}`"
        v-for="(item, index) of Yb51SalesManagerWeekSalonRecordList"
        :key="index"
      >
        <van-field
          class="fbox"
          v-model="item.channel"
          :name="`channel${index}`"
          label="渠道及网点"
          placeholder="请填写渠道及网点"
          :rules="[{ required: true, message: '不能为空' }]"
        ></van-field>

        <van-field
          class="fbox"
          v-model="item.form"
          :name="`form${index}`"
          label="形式"
          placeholder="请填写形式"
          :rules="[{ required: true, message: '不能为空' }]"
        ></van-field>

        <van-field
          class="fbox"
          v-model="item.product"
          :name="`product${index}`"
          label="产品"
          is-link
          readonly
          placeholder="请填写产品"
          :rules="[{ required: true, message: '不能为空' }]"
          @click="onshowPickerProduct(index)"
        ></van-field>

        <van-field
          type="digit"
          class="fbox"
          v-model="item.signingNum"
          :name="`signingNum${index}`"
          label="签约件数"
          placeholder="请填写签约件数"
          :rules="[{ required: true, message: '不能为空' }]"
        ></van-field>

        <van-field
          type="number"
          class="fbox"
          v-model="item.premium"
          :name="`premium${index}`"
          label="保费(万)"
          placeholder="请填写保费"
          :rules="[{ required: true, message: '不能为空' }]"
        ></van-field>

        <van-field
          class="fbox"
          v-model="item.specifyDate"
          :name="`specifyDate${index}`"
          label="指定日期"
          is-link
          readonly
          placeholder="请填写指定日期"
          :rules="[{ required: true, message: '不能为空' }]"
          @click="onshowPickerDate(index)"
        ></van-field>

        <van-field
          autosize
          type="textarea"
          :name="`uploader${index}`"
          label="上传图片"
          :rules="[{ required: true, message: '请上传不超过1张照片,5M以内' }]"
        >
          <template #input>
            <van-uploader
              v-model="item.uploaderImgList"
              :max-count="1"
              :before-read="onbeforeRead"
              :after-read="onafterRead"
            ></van-uploader>
          </template>
        </van-field>

        <van-button
          v-if="index >= 1"
          size="small"
          block
          type="danger"
          
          @click="onDeleteYb51SalesManagerWeekSalonRecordList(index)"
           class="dangerDelete"
          >删除</van-button
        >
      </van-cell-group>
      <div class="button">
        <van-button
          block
          icon="plus"
          type="warning"
          style="width: 35%"
          @click="onAddYb51SalesManagerWeekSalonRecordList"
          >增加</van-button
        >
        <van-button block type="primary" native-type="submit" style="width: 55%">提交</van-button>
      </div>
    </van-form>

    <van-popup v-model:show="showPickerDate" position="bottom">
      <van-date-picker
        v-model="currentDate"
        @confirm="onConfirmDate"
        @cancel="showPickerDate = false"
        :columns-type="['year', 'month', 'day']"
        title="请选择月日"
        :formatter="formatter"
      ></van-date-picker>
    </van-popup>

    <van-popup v-model:show="showPickerProduct" position="bottom">
      <van-picker
        :columns="Productcolumns"
        @confirm="onConfirmProduct"
        @cancel="showPickerProduct = false"
      ></van-picker>
    </van-popup>
  </div>
</template>
<script setup>
import {
  onBeforeMount,
  onMounted,
  onUnmounted,
  watch,
  computed,
  provide,
  inject,
  ref,
  reactive,
  nextTick,
  h
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const dayjs = inject('$dayjs')
const showPageLoading = inject('showPageLoading')
const hidePageLoading = inject('hidePageLoading')
const showAllNonBaseMenuItem = inject('showAllNonBaseMenuItem')
const hideAllNonBaseMenuItem = inject('hideAllNonBaseMenuItem')
import { isIOS, parseTime, handleFontSize } from '@/utils'
import { yb51_sales_manager_week_salon_record_saveYb51SalesManagerWeekSalonRecord } from '@/request/api.js'

onBeforeMount(() => {})
onMounted(() => {
  agentcode = route.query.agentcode

  Yb51SalesManagerWeekSalonRecordList.value = [
    {
      agentcode: agentcode,
      channel: '',
      form: '',
      product: '',
      signingNum: '',
      premium: '',
      specifyDate: '',
      uploaderImgList: []
    }
  ]
})

let agentcode


const currentDate = ref([dayjs().format('YYYY'), dayjs().format('MM'), dayjs().format('DD')])
const formatter = (type, option) => {
  if (type === 'year') {
    option.text += '年'
  }
  if (type === 'month') {
    option.text += '月'
  }
  if (type === 'day') {
    option.text += '日'
  }
  return option
}

const showPickerDate = ref(false)
let PickerIndex = 'no'
function onshowPickerDate(index) {
  showPickerDate.value = true
  PickerIndex = index
}
const onConfirmDate = ({ selectedValues }) => {
  Yb51SalesManagerWeekSalonRecordList.value[PickerIndex].specifyDate = selectedValues.join('-')
  PickerIndex = 'no'
  showPickerDate.value = false
}

const showPickerProduct = ref(false)
let ProductPickerIndex = 'no'
function onshowPickerProduct(index) {
  showPickerProduct.value = true
  ProductPickerIndex = index
}
const Productcolumns = [
  { text: '南山松', value: '南山松' },
  { text: '福如东海', value: '福如东海' },
  { text: '菩提树', value: '菩提树' },
  { text: '其他', value: '其他' }
]

const onConfirmProduct = ({ selectedOptions }) => {
  Yb51SalesManagerWeekSalonRecordList.value[ProductPickerIndex].product = selectedOptions[0]?.text
  showPickerProduct.value = false
}

import { compressImageToTargetSize } from '@/utils'
const targetSize = 1024 * 1024 * 1 // 1M大小
function onbeforeRead(file) {
  return new Promise((resolve, reject) => {
    console.log('压缩前文件大小:', file.size/(1024 * 1024), 'M')
    if (file.size < targetSize) {
      console.log('小于，不用压缩')
      resolve(file)
    } else {
      compressImageToTargetSize(file, targetSize).then((res) => {
        console.log('压缩后的文件大小:',res.size/(1024 * 1024), 'M')
        resolve(res)
      })
    }
  })
}
//文件读取后的回调函数
function onafterRead(file) {
  console.log('读取完毕')
}

const Yb51SalesManagerWeekSalonRecordList = ref([
  {
    agentcode: '',
    channel: '',
    form: '',
    product: '',
    signingNum: '',
    premium: '',
    specifyDate: '',
    uploaderImgList: []
  }
])

//新增
function onAddYb51SalesManagerWeekSalonRecordList() {
  if (Yb51SalesManagerWeekSalonRecordList.value.length == 10) {
    alert('已超过增加上限')
    return
  } else {
    Yb51SalesManagerWeekSalonRecordList.value.push({
      agentcode: agentcode,
      channel: '',
      form: '',
      product: '',
      signingNum: '',
      premium: '',
      specifyDate: '',
      uploaderImgList: []
    })
  }
}
//删除走访
function onDeleteYb51SalesManagerWeekSalonRecordList(index) {
  Yb51SalesManagerWeekSalonRecordList.value.splice(index, 1)
}

//新增客户经理月微沙龙记录
function onsaveYb51SalesManagerWeekSalonRecord() {
  showPageLoading()
  let formdata = new FormData()
  let Yb51SalesManagerWeekSalonRecordListExImg = []
  Yb51SalesManagerWeekSalonRecordList.value.forEach((item) => {
    formdata.append(
      'multipartFiles',
      new Blob([item.uploaderImgList[0].file], { type: 'multipart/form-data' }),
      item.uploaderImgList[0].file.name
    )
    delete item.uploaderImgList
    Yb51SalesManagerWeekSalonRecordListExImg.push(item)
  })
  formdata.append(
    'yb51SalesManagerWeekSalonRecords',
    new Blob([JSON.stringify(Yb51SalesManagerWeekSalonRecordListExImg)], {
      type: 'application/json'
    })
  )

  yb51_sales_manager_week_salon_record_saveYb51SalesManagerWeekSalonRecord(formdata).then((r) => {
    hidePageLoading()
    if (r.status == 200) {
      console.log(r)
     
      showDialog({
        title: '提交成功',
        message: '点击确认后返回首页'
      }).then(() => {
        window.history.go(-1)
      })
    } else {
      console.log('出错了，请重试')
      alert('出错了，请重试')
    }
  })
}
function onFailed() {
  console.log('出错了')
}
</script>
